<template>
  <div>
    <el-menu
      :default-active="1 + ''"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#ffffff"
      text-color="#333"
      active-text-color="#ffd04b"
    >
      <!-- 处理中心 -->
      <el-menu-item index="1">处理中心</el-menu-item>
      <!-- 工作台 -->
      <el-menu-item index="2">工作台</el-menu-item>

      <!-- 用户中心 -->
      <el-submenu index="4">
        <template slot="title">
          <el-avatar :src="user.headImg"></el-avatar>
        </template>
        <el-menu-item index="4-1" @click="handleClick('/userCenter')">
          <i class="el-icon-s-custom"></i>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="4-2">
          <i class="el-icon-bell"></i>
          <span>基本信息</span>
        </el-menu-item>
        <el-menu-item index="4-3">
          <i class="el-icon-tickets"></i>
          <span>消息通知</span>
        </el-menu-item>
        <el-menu-item index="4-4" @click="logout">
          <i class="el-icon-switch-button"></i>
          <span>退出登录</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
    };
  },
  methods: {
    logout() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //请求路径默认为/logout
          this.$axios.delete("logout").then((res) => {
            if (res.data.code == 200) {
              //清空localStorage对应的信息
              sessionStorage.setItem("authorization", "");
              this.$message.success(res.data.message);
              //跳转到登录页面
              this.$router.push("/");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleClick(path) {
      this.$router.push(path);
    },
  },
};
</script>